<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useChatStore } from '@/stores/chat'

const chatStore = useChatStore()
const { chatList: messages, messageCount } = storeToRefs(chatStore)
const { clearChatList: clearMessages } = chatStore
</script>

<template>
  <div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-4xl mx-auto px-4">
      <div class="bg-white rounded-lg shadow-sm">
        <div class="px-6 py-4 border-b">
          <h1 class="text-2xl font-bold text-gray-900">
            对话历史
          </h1>
          <p class="text-gray-600 mt-1">
            查看您的所有对话记录
          </p>
        </div>

        <div class="p-6">
          <div v-if="messages.length === 0" class="text-center py-12">
            <div class="text-gray-400 mb-4">
              <svg class="w-16 h-16 mx-auto" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
                <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
              </svg>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">
              暂无对话记录
            </h3>
            <p class="text-gray-500 mb-6">
              开始您的第一次对话吧！
            </p>
            <router-link
              to="/chat"
              class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition duration-200"
            >
              开始聊天
            </router-link>
          </div>

          <div v-else class="space-y-4">
            <div class="flex justify-between items-center mb-6">
              <span class="text-sm text-gray-500">共 {{ messageCount }} 条消息</span>
              <button
                class="text-red-600 hover:text-red-700 text-sm font-medium"
                @click="clearMessages"
              >
                清空所有记录
              </button>
            </div>

            <div
              v-for="message in messages"
              :key="message.id"
              class="border rounded-lg p-4 hover:bg-gray-50 transition duration-200"
            >
              <div class="flex items-start space-x-3">
                <div
                  class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white text-sm font-medium" :class="[
                    !message.isAnswer ? 'bg-blue-600' : 'bg-green-600',
                  ]"
                >
                  {{ !message.isAnswer ? '我' : 'AI' }}
                </div>
                <div class="flex-1 min-w-0">
                  <div class="flex items-center space-x-2 mb-1">
                    <span class="text-sm font-medium text-gray-900">
                      {{ !message.isAnswer ? '用户' : '智能助手' }}
                    </span>
                  </div>
                  <p class="text-gray-700 text-sm leading-relaxed">
                    {{ message.content }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
